.my-user-profile-container {
  width: 100vw;
  height: 100%;
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;

  .profile-container {
    width: 100%;
    height: fit-content;
    padding: 20rpx 40rpx;
    border-radius: 30rpx;
    background-color: #fff;

    .profile-row {
      width: 100%;
      min-height: 100rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      font-size: 30rpx;

      .row-title {
        flex-shrink: 0;
        color: #555;
      }

      .row-content {
        max-width: 60vw;
        display: flex;
        flex-grow: 1;
        align-items: center;
        justify-content: flex-end;
        margin-left: auto;
        overflow: hidden;
        color: #333;

        .content {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          input {
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .fas {
          font-size: 30rpx;
          margin-left: 20rpx;
          color: #aaa;
        }

        .avatar {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          background-color: #eee;
        }
      }

      .gender, .birthday {
        ::v-deep {
          .u-select__body, .u-picker-body {
            height: 400rpx;
          }
        }
      }
    }
  }

  .logout-button-container {
    width: 100%;
    height: fit-content;
    padding: 0 50rpx;
    padding-bottom: 30rpx;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    margin-top: auto;

    .btn__default {
      width: 100%;
      height: 80rpx;
      background-color: #f4756b;
      border-radius: 100rpx;
      text-align: center;
      color: #fff;
      line-height: 80rpx;
      transition-property: opacity;
      transition-duration: 500ms;
    }
  }
}

::v-deep {
  .u-drawer-content, .u-picker-header, .u-datetime-picker {
    border-radius: 30rpx;
  }
}

.upload {
  position: fixed;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: -999;
  pointer-events: none;
}